<template>
  <div class="body">
    <el-container>
      <!-- 头部导航栏 -->
      <el-header>
        <Index></Index>
      </el-header>
      <!-- 左侧边栏 -->

      <el-container>
        <el-container>
          <el-main style="margin-top:30px;">
           <el-row style="margin-bottom:20px;">
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">
                  <font color="#A1FEDB" size="4">系统总览</font>
                </el-breadcrumb-item>
                <el-breadcrumb-item>
                  <font color="#A1FEDB" size="4">功率曲线</font>
                </el-breadcrumb-item>
              </el-breadcrumb>
            </el-row>
            <el-row>
              <div class="block" style="margin-left:40%;">
                <span class="demonstration">
                  <font style="color:white">选择查看日期：</font>
                </span>
                <el-date-picker
                  v-model="value1"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy-MM-dd"
                  @change="selectbytime()"
                ></el-date-picker>
              </div>
            </el-row>
            <el-row>
              <div id="allmap"></div>
            </el-row>
          </el-main>
        </el-container>
      </el-container>

      <Bottom></Bottom>
    </el-container>
  </div>
</template>
<script>
// import echarts from 'echarts'
import Index from '~/components/index2'
import Bottom from '~/components/bottom'

export default {
  data() {
    return {
      tableData: [
        {
          date1: '参数一',
          date2: '0.3'
        },
        {
          date1: '参数二',
          date2: '0.4'
        },
        {
          date1: '参数三',
          date2: '0.5'
        },
        {
          date1: '参数四',
          date2: '0.6'
        }
      ],

      activeIndex: '1',
      value1: '',
      value2: '',
      activeName: 'first',

      center: { lng: 116.404, lat: 39.915 },
      zoom: 12,
      scroll: true,
      onlinelist: [],
      list1: [],
      list: [],
      offlinelist: [],
      online: [],
      offline: [],

      onlinenumber: 0,
      offlinenumber: 0,
      totalnumber: 0,
      echartsdata1: [],
      echartsdata2: [],
      echartsdata3: [],
      echartsdata4: [],
      echartsdata5: [],
      echartsdata6: [],
      echartsdata7: [],
      echartsdata8: []
    }
  },
  components: {
    Index,
    Bottom
  },
  created() {},

  mounted() {
    this.value1 = this.getNowFormatDate()

    this.value2 = this.value1
    console.log(this.value2)

    // this.readpowercurvedata('储能充电功率曲线')
    // this.readpowercurvedata('储能放电功率曲线')

    this.readpowercurvedata('卧式风力发电功率曲线')
    this.readpowercurvedata('垂直风力发电功率曲线')
    this.readpowercurvedata('总负荷功率曲线')
    this.readpowercurvedata('光伏发电功率曲线')
    this.readpowercurvedata('燃气发电机功率曲线')
    this.readpowercurvedata('蓄电池储能放电功率曲线')
    this.readpowercurvedata('超级电容储能放电功率曲线')
    this.readpowercurvedata('总发电功率曲线')
    this.laterpowercurve()
  },

  methods: {
    //根据日期选择功率曲线
    selectbytime() {
      this.echartsdata1 = []
      this.echartsdata2 = []
      this.echartsdata3 = []
      this.echartsdata4 = []
      this.echartsdata5 = []
      this.echartsdata6 = []
      this.echartsdata7 = []
      this.echartsdata8 = []
      this.value2 = this.getFormatDate(this.value1)
      this.readpowercurvedata('总发电功率曲线')
      // this.readpowercurvedata('储能充电功率曲线')
      // this.readpowercurvedata('储能放电功率曲线')
      this.readpowercurvedata('蓄电池储能放电功率曲线')
      this.readpowercurvedata('超级电容储能放电功率曲线')
      this.readpowercurvedata('卧式风力发电功率曲线')
      this.readpowercurvedata('垂直风力发电功率曲线')
      this.readpowercurvedata('光伏发电功率曲线')
      this.readpowercurvedata('总负荷功率曲线')
      this.readpowercurvedata('燃气发电机功率曲线')
      this.laterpowercurve()
    },
    //读取功率曲线的数据
    readpowercurvedata(name) {
      this.$axios({
        method: 'get',
        params: {
          name: name,
          date: this.value2
        },
        url: 'http://127.0.0.1:8082/powercurve/readpowercurvedata'
      }).then(res => {
        //将数据库中的text类型文件转为json，就能读取了，要不然text是以字节为单位读取数据的
        // let newpower = JSON.parse(res.data.power)
        let newpower = res.data.list

        if (res.data.name == '总发电功率曲线') {
          this.echartsdata1 = newpower
        } else if (res.data.name == '超级电容储能放电功率曲线') {
          this.echartsdata2 = newpower
        } else if (res.data.name == '蓄电池储能放电功率曲线') {
          this.echartsdata3 = newpower
        } else if (res.data.name == '卧式风力发电功率曲线') {
          this.echartsdata4 = newpower
        } else if (res.data.name == '垂直风力发电功率曲线') {
          this.echartsdata5 = newpower
        } else if (res.data.name == '光伏发电功率曲线') {
          this.echartsdata6 = newpower
        } else if (res.data.name == '总负荷功率曲线') {
          this.echartsdata7 = newpower
        } else if (res.data.name == '燃气发电机功率曲线') {
          this.echartsdata8 = newpower
        }

        //   // this.$message.success('删除成功')
      })
    },
    //时间格式转换器
    getNowFormatDate() {
      var date = new Date()
      var seperator1 = '-'
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var strDate = date.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate
      return currentdate
    },
    //通用时间格式转换器
    getFormatDate(date) {
      var seperator1 = '-'
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var strDate = date.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate
      return currentdate
    },
    //延迟执行函数
    laterpowercurve() {
      setTimeout(() => {
        this.powercurve()
      }, 2000)
    },
    powercurve() {
      let myChart3 = this.$echarts.init(document.getElementById('allmap'))
      let option3 = {
        title: {
          text: '功率曲线图',
          color: '#ffffff',
          textStyle: {
            fontWeight: 'normal', //标题颜色
            color: '#FFFFFF'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          textStyle: {
            fontWeight: 'normal', //标题颜色
            color: '#FFFFFF'
          },
          data: [
            '总发电功率曲线',
            '蓄电池储能放电功率曲线',
            '超级电容储能放电功率曲线',
            '卧式风力发电功率曲线',
            '垂直风力发电功率曲线',
            '光伏发电功率曲线',
            '总负荷功率曲线',
            '燃气机发电功率曲线'
          ]
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff'
              }
            },

            data: [
              '0:00',
              '0:15',
              '0:30',
              '0:45',
              '1:00',
              '1:15',
              '1:30',
              '1:45',

              '2:00',
              '2:15',
              '2:30',
              '2:45',
              '3:00',
              '3:15',
              '3:30',
              '3:45',
              '4:00',
              '4:15',
              '4:30',
              '4:45',
              '5:00',
              '5:15',
              '5:30',
              '5:45',
              '6:00',
              '6:15',
              '6:30',
              '6:45',
              '7:00',
              '7:15',
              '7:30',
              '7:45',
              '8:00',
              '8:15',
              '8:30',
              '8:45',
              '9:00',
              '9:15',
              '9:30',
              '9:45',
              '10:00',
              '10:15',
              '10:30',
              '10:45',
              '11:00',
              '11:15',
              '11:30',
              '11:45',
              '12:00',
              '12:15',
              '12:30',
              '12:45',
              '13:00',
              '13:15',
              '13:30',
              '13:45',
              '14:00',
              '14:15',
              '14:30',
              '14:45',
              '15:00',
              '15:15',
              '15:30',
              '15:45',
              '16:00',
              '16:15',
              '16:30',
              '16:45',
              '17:00',
              '17:15',
              '17:30',
              '17:45',
              '18:00',
              '18:15',
              '18:30',
              '18:45',
              '19:00',
              '19:15',
              '19:30',
              '19:45',
              '20:00',
              '20:15',
              '20:30',
              '20:45',
              '21:00',
              '21:15',
              '21:30',
              '21:45',
              '22:00',
              '22:15',
              '22:30',
              '22:45',
              '23:00',
              '23:15',
              '23:30',
              '23:45',
              '24:00(时/分)'
            ]
          }
        ],
        yAxis: [
          {
            type: 'value',
            //固定Y轴的值
            scale: true,
            name: '功率/W',
            nameTextStyle: {
              color: '#ffffff',
              fontSize: 15,
              padding: 2
            },

            // max: 100,
            // min: 0,
            // boundaryGap: [0.2, 0.2],
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff'
              }
            }
          }
        ],
        series: [
          {
            name: '总发电功率曲线',
            type: 'line',
            smooth: true, //曲线平滑
            stack: '总量1',
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#E5E5E5'
                }
              }
            },
            areaStyle: {},
            data: this.echartsdata1
            // data: [
            //   0,
            //   0,
            //   0,
            //   1,
            //   2,
            //   3,
            //   3,
            //   5,
            //   6,
            //   6,
            //   7,
            //   4,
            //   8,
            //   9,
            //   13,
            //   6,
            //   5,
            //   0,
            //   0,
            //   0,
            //   34,
            //   63,
            //   134,
            //   104,
            //   148,
            //   167,
            //   180,
            //   145,
            //   146,
            //   184,
            //   154,
            //   141,
            //   174,
            //   156,
            //   143,
            //   149,
            //   156,
            //   167,
            //   178,
            //   189,
            //   154,
            //   141,
            //   174,
            //   156
            // ]
          },
          {
            name: '蓄电池储能放电功率曲线',
            type: 'line',
            smooth: true, //曲线平滑
            stack: '总量2',
            areaStyle: {},
            data: this.echartsdata2
            // data: [
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   3,
            //   3,
            //   5,
            //   6,
            //   6,
            //   7,
            //   4,
            //   8,
            //   9,
            //   1,
            //   3,
            //   7,
            //   0,
            //   0,
            //   0,
            //   12,
            //   23,
            //   26,
            //   32,
            //   36,
            //   40,
            //   43,
            //   45,
            //   46,
            //   48,
            //   54,
            //   41,
            //   34,
            //   56,
            //   43,
            //   42,
            //   56,
            //   67,
            //   78,
            //   89,
            //   56,
            //   43,
            //   42,
            //   56
            // ]
          },
          {
            name: '超级电容储能放电功率曲线',
            type: 'line',
            smooth: true, //曲线平滑
            stack: '总量3',
            areaStyle: {},
            data: this.echartsdata3
            // data: [
            //   0,
            //   0,
            //   0,
            //   1,
            //   2,
            //   3,
            //   3,

            //   4,
            //   8,
            //   9,
            //   13,
            //   5,
            //   6,
            //   6,
            //   7,
            //   6,
            //   5,
            //   0,
            //   0,
            //   0,
            //   12,
            //   23,
            //   26,
            //   32,
            //   36,
            //   40,
            //   43,
            //   45,

            //   43,
            //   42,
            //   56,
            //   67,
            //   78,
            //   46,
            //   48,
            //   54,
            //   41,
            //   34,
            //   56,
            //   89,
            //   43,
            //   42,
            //   56,
            //   67
            // ]
          },
          {
            name: '卧式风力发电功率曲线',
            type: 'line',
            smooth: true, //曲线平滑
            stack: '总量4',
            label: {
              normal: {
                show: false,
                position: 'top'
              }
            },
            areaStyle: {},
            data: this.echartsdata4
            // data: [
            //   0,
            //   0,
            //   1,
            //   1,
            //   0,
            //   3,
            //   4,
            //   3,
            //   2,
            //   6,
            //   7,
            //   8,
            //   3,
            //   2,
            //   7,
            //   5,
            //   7,
            //   6,
            //   5,
            //   5,
            //   12,
            //   23,
            //   26,
            //   32,
            //   36,
            //   40,
            //   43,
            //   42,
            //   56,
            //   67,
            //   78,
            //   43,
            //   45,

            //   46,
            //   48,
            //   54,
            //   41,
            //   34,
            //   56,
            //   89,
            //   45,

            //   46,
            //   48,
            //   54
            // ]
          },
          {
            name: '垂直风力发电功率曲线',
            type: 'line',
            smooth: true, //曲线平滑
            stack: '总量5',
            label: {
              normal: {
                show: false,
                position: 'top'
              }
            },
            areaStyle: {},
            data: this.echartsdata5
            // data: [
            //   0,
            //   0,
            //   1,
            //   1,
            //   0,
            //   3,
            //   4,
            //   3,
            //   2,
            //   3,
            //   7,
            //   2,
            //   7,
            //   9,
            //   4,
            //   5,
            //   7,
            //   12,
            //   10,
            //   15,
            //   12,
            //   23,
            //   26,
            //   32,
            //   36,
            //   40,
            //   43,
            //   42,
            //   46,
            //   34,
            //   56,
            //   89,
            //   48,
            //   54,
            //   41,
            //   56,
            //   67,
            //   78,
            //   43,
            //   45,
            //   56,
            //   89,
            //   48,
            //   54
            // ]
          },
          {
            name: '光伏发电功率曲线',
            type: 'line',
            smooth: true, //曲线平滑
            stack: '总量6',
            areaStyle: {},
            data: this.echartsdata6
          },
          {
            name: '总负荷功率曲线',
            type: 'line',
            smooth: true, //曲线平滑
            stack: '总量7',
            label: {
              normal: {
                show: false,
                position: 'top'
              }
            },
            areaStyle: {},
            data: this.echartsdata7
            // data: [
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   12,
            //   23,
            //   26,
            //   34,
            //   56,
            //   89,
            //   48,
            //   54,
            //   41,

            //   43,
            //   42,
            //   46,
            //   56,
            //   32,
            //   36,
            //   40,
            //   67,
            //   78,
            //   43,
            //   45,
            //   43,
            //   42,
            //   46,
            //   56
            // ]
          },

          {
            name: '燃气机发电功率曲线',
            type: 'line',
            smooth: true, //曲线平滑
            stack: '总量8',
            label: {
              normal: {
                show: false,
                position: 'top'
              }
            },
            areaStyle: {},
            data: this.echartsdata8
            // data: [
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0
            // ]
          }
        ]
      }
      myChart3.setOption(option3)
      //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
      window.addEventListener('resize', function() {
        myChart3.resize()
      })
    },
    // Date.prototype.format = function(fmt) {
    //   var o = {
    //     'M+': this.getMonth() + 1, //月份
    //     'd+': this.getDate(), //日
    //     'h+': this.getHours(), //小时
    //     'm+': this.getMinutes(), //分
    //     's+': this.getSeconds(), //秒
    //     'q+': Math.floor((this.getMonth() + 3) / 3), //季度
    //     S: this.getMilliseconds() //毫秒
    //   }
    //   if (/(y+)/.test(fmt))
    //     fmt = fmt.replace(
    //       RegExp.$1,
    //       (this.getFullYear() + '').substr(4 - RegExp.$1.length)
    //     )
    //   for (var k in o)
    //     if (new RegExp('(' + k + ')').test(fmt))
    //       fmt = fmt.replace(
    //         RegExp.$1,
    //         RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
    //       )
    //   return fmt
    // }
    handleDelete(index, row) {
      alert(index)
      //  this.$router.push({path:'/details',query: {id:item.device_id}})
      this.$router.push({ path: '/indexx' })
      console.log(index, row)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },

    logout() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
    handler({ BMap, map }) {
      console.log(BMap, map)
    },

    opencarinfo(item) {
      //  this.$router.push({name:'details',params: {id:'1'}})
      // alert("执行")

      this.$router.push({ path: '/details', query: { id: item.device_id } })
    }
  }
}
</script>
<style lang="scss" scoped>
#allmap {
  height: 700px;
  width: 96%;
  color: white;
}

.body {
  width: 100%;

  margin-top: 0px;

  background-image: url(../../assets/images/新UI12.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.el-row {
  width: 100%;
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
